<template>
    <div id="app">
      <h1>教案生成器</h1>
      <form @submit.prevent="generateLessonPlan">
        <div>
          <label for="lesson">课程名称:</label>
          <input type="text" id="lesson" v-model="lessonPlan.lesson" required />
        </div>
        <div>
          <label for="grade">年级:</label>
          <input type="text" id="grade" v-model="lessonPlan.grade" required />
        </div>
        <div>
          <label for="subject">科目:</label>
          <input type="text" id="subject" v-model="lessonPlan.subject" required />
        </div>
        <div>
          <label for="remark">备注:</label>
          <textarea id="remark" v-model="lessonPlan.remark"></textarea>
        </div>
        <button type="submit">生成教案</button>
      </form>
      <div v-if="response">
        <h2>生成的教案:</h2>
        <pre>{{ response }}</pre>
      </div>
    </div>
  </template>
  
  <script>
  import { ref } from 'vue';
import { generatejiaoan } from '@/api/jiaoan'

  
  export default {
    name: 'App',
    setup() {
      const lessonPlan = ref({
        lesson: '',
        grade: '',
        subject: '',
        remark: ''
      });
      const response = ref(null);
  
      const generateLessonPlan = async () => {
        // try {
        //   const res = await axios.post('http://your-backend-url/chat/get_teaching_assistant', lessonPlan.value);
        //   response.value = res.data;
        // } catch (error) {
        //   console.error('Error:', error);
        //   response.value = 'Failed to generate lesson plan.';
        // }

        const res = generatejiaoan(lessonPlan.value);
        response.value - res.data
      };
  
      return {
        lessonPlan,
        response,
        generateLessonPlan
      };
    }
  };
  </script>
  
  <style>
  /* 在这里添加CSS样式 */
  #app {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    text-align: center;
    margin-top: 60px;
  }
  </style>